<script setup>
import { ref } from 'vue';

// 日历
import { ElCalendar } from 'element-plus';

// 日历绑定的值
const calendarValue = ref(new Date());
// 控制日历是否展开的状态
const isExpanded = ref(false);

// 定义自定义事件
const emit = defineEmits(['send-data'])

// 切换展开状态的方法
const toggleExpand = () => {
  isExpanded.value =!isExpanded.value;

  // 触发自定义事件并传递属性值
  emit('send-data', isExpanded.value);
};
</script>

<template>
    <!-- 日历 -->
    <h3 @click="toggleExpand">日历</h3>
    <div class="calendar-wrapper" :style="{ height: isExpanded? '500px' : '0', overflow: 'hidden' }" :class="{ 'expand-transition': isExpanded }">
        <el-calendar v-model="calendarValue" />
    </div>
</template>

<style lang="scss">
.days{
  margin-top:10px;
}
.my-calendar {
  width: 100%;
  /* 可以根据需要调整日历的整体高度 */
  height: 500px;
}

.calendar-day-number {
  font-size: 14px;
}
.calendar-wrapper {
  height: 500px;
  padding: 0;
  transition: height 0.3s ease; /* 添加过渡效果，控制高度变化的速度和方式 */
}
</style>
